<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>购物车</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	  //将原有ajax操作删除 我们自己使用js重写
	  //提供界面中 - 号按钮的操作事件
	  //          商品ID 商品数量 商品价格
	  function  sub(cid,cnum,price) {
	  	console.log(cnum)
			if(cnum == 1){
				if(confirm("当前购物车中只有一件商品,是否移除?")){
					//在JS中可以使用DOM对象中一共location对象的href属性进行点击之后的跳转
					location.href = "cart?method=delete&cid="+cid;
				}
			}else{
				cnum--; //让数量减1操作
				//更新页面数据
				location.href = "cart?method=update&cid="+cid+"&cnum="+cnum+"&price="+price;

			}
	  }
	  //提供界面中 + 号按钮的操作事件
	  //          商品ID 商品数量 商品价格
	  function  add(cid,cnum,price) {
		 cnum++; //让数量加1操作
		  //更新页面数据
		  location.href = "cart?method=update&cid="+cid+"&cnum="+cnum+"&price="+price;
	  }
	  //提供删除按钮事件操作
	  function  delCart(cid) {
		  if(confirm("是否要删除购物车中商品?")){
			  //更新页面数据
		  	location.href = "cart?method=delete&cid="+cid;
		  }
	  }

	  //清空购物车方法
	function  clearCart(uid) {
		if(confirm("是否要清空购物车中商品?")){
			//更新页面数据
			location.href = "cart?method=clear&uid="+uid;
		}
	}

</script>
</head>
<body style="background-color:#f5f5f5">
<%@ include file="header.jsp"%>
<div class="container" style="background-color: white;">
	<div class="row" style="margin-left: 40px">
		<h3>我的购物车<small>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</small></h3>
	</div>
	<div class="row" style="margin-top: 40px;">
<%--		购物车没有数据，是什么都不展示, 只有有数据才展示--%>
		<c:if test="${empty list}">
			<h3>购物车空空如也,快去购物吧!!!!!!!</h3>
		</c:if>
<%--	有数据之后的页面数据展示--%>
	    <c:if test="${not empty list}">
		<div class="col-md-10 col-md-offset-1">
			<table class="table table-bordered table-striped table-hover">
 				<tr>
 					<th>序号</th>
 					<th>商品名称</th>
 					<th>价格</th>
 					<th>数量</th>
 					<th>小计</th>
 					<th>操作</th>
 				</tr>
 				<c:set value="0" var="sum"></c:set>
 				<c:forEach items="${list}" var="c" varStatus="i">
	 				<tr>
	 					<th>${i.count}</th>
<%--						将goods 修改为商品对象 product--%>
	 					<th>${c.product.pname}</th>
	 					<th>${c.product.pprice}</th>
	 					<th width="100px">
		 					<div class="input-group">
		 						<span class="input-group-btn">
<%--									修改绑定事件和传递的参数 将goods 修改为商品对象 product --%>
		 							<button class="btn btn-default" type="button" onclick="sub(${c.cid},${c.cnum},${c.product.pprice})">-</button>
		 						</span>
<%--								将num 修改为 cnum--%>
		 						<input type="text" class="form-control" id="num_count${i.count}" value="${c.cnum}" readonly="readonly" style="width:40px">
		 						<span class="input-group-btn">
									<%--									修改绑定事件和传递的参数 将goods 修改为商品对象 product --%>
		 							<button class="btn btn-default" type="button" onclick="add(${c.cid},${c.cnum},${c.product.pprice})">+</button>
		 						</span>
	 						</div>
	 					</th>
<%--						这个价钱不对 money 修改为 ccount--%>
	 					<th>¥&nbsp;${c.ccount }</th>
	 					<th>
<%--							对删除按钮重新绑定事件--%>
	 						<button type="button" class="btn btn-default" onclick="delCart(${c.cid})">删除</button>
	 					</th>
	 				</tr>
					<%--						这个价钱不对 money 修改为 ccount--%>
	 				<c:set var="sum" value="${sum+c.ccount}"></c:set>
 				</c:forEach>
			</table>
		</div>
		</c:if>
	</div>
	<hr>
	<div class="row">
		<div class="pull-right" style="margin-right: 40px;">
			
	            <div>
<%--					 添加清空购物车商品事件--%>
	            	<a id="removeAllProduct" href="javascript:clearCart(0)" class="btn btn-default btn-lg" onclick="clearCart(${loginUser.uid})">清空购物车</a>
	            	&nbsp;&nbsp;
	            	<a href="${pageContext.request.contextPath}/order?method=preView&uid=${loginUser.uid}" class="btn  btn-danger btn-lg">添加收货地址</a>
	            	
	            </div>
	            <br><br>
	            <div style="margin-bottom: 20px;">        		  
	            	商品金额总计：<span id="total" class="text-danger"><b>￥&nbsp;&nbsp;${sum}</b></span>
	            </div>
		</div>
	</div>
</div>
	
    
<!-- 底部 -->
<%@ include file="footer.jsp"%>

</body>
</html>